<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.css"/>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/general.css"/>
		<style type="text/css">
			.main{
				width: 100%;
				background-color: white;
				margin: 0.5em 0;
			}
			.selected:after{
				content: "√";
				color: white;
				text-align: center;
				display: block;
				width: 1.3em;
				height: 1.3em;
				border-radius:50% ;
				background-color: red;
				z-index: 2;
				position: absolute;
				right: 10%;
				top: 50%;
				-webkit-transform: translateY(-50%);
			    transform: translateY(-50%);
			}
			
			.mui-table-view-cell:after {
			    position: absolute;
			    right: 0;
			    bottom: 0;
			    left: 15px;
			    height: 1px;
			    content: '';
			    -webkit-transform: scaleY(.5);
			    transform: scaleY(.5);
			    background-color: #c8c7cc;
			}
			
			.mui-input-row:after {
			    position: absolute;
			    right: 0;
			    bottom: 0;
			    left: 15px;
			    height: 1px;
			    content: '';
			    -webkit-transform: scaleY(.5);
			    transform: scaleY(.5);
			    background-color: #c8c7cc;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">权限设置</h1>
		    <div class="ic mui-icon-right-nav mui-pull-right" id="setprivilege">保存</div>
		</header>
		<div class="mui-content" id="contentid">
		    
		    
		    
		</div>
		
		<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var rid = 0;
			var plist = [],	//已选权限数组
			rlist = [];		//数据数组
			
			
			var slist = [];		//权限数组
			patt =new RegExp("selected");
			window.onload = function(){
				mui.init();
				rid = getrequest().rid||0;
				console.log(rid);
				mui.plusReady(function(res){
					 var view = plus.webview.currentWebview();
					 console.log(JSON.stringify(view));
					 rid = view.rid||0;
				})
				
				//监听保存
				g("setprivilege").addEventListener('tap',function(e){
					//计算开关
					var muiBox = mui('.mui-active');
					muiBox.each(function(index,item) {
						if($(this).is(".mui-active")){
							var id = parseInt($(this).data("id"));
							if(!isNaN(id)){
								plist.push({pri_id:id});
							}
						}
			        })
					var checklist = $("input[name='Checkbox']:checked"); 
					$(checklist).each(function(){ 
					 	console.log(this.value);
					 	plist.push({pri_id:this.value});
					})
					//上传权限
					var data = {
						url:"/api/role/set",
						data:{
							access_token:acctoken(),
							role_id:rid,
							pri_id_list:plist||[],
						}
					}
					//return;
					ajax(data,function(res){
						console.log(res);
						//清空plist
						plist = [];
						mui.toast(res.msg);
					},'',function(err){
						console.log("清空plist")
						plist = [];
					})
				})
				//监听switch
				$("body").on("toggle",".mui-switch",function(e){
					console.log(e);
					var index = this.getAttribute("index");
					console.log(index);
					if(!e.detail.isActive){
						$(this).parent().next().find("input").prop("checked",false);
						//$(this).parent().next().find("input").attr("checked",false);
						//备用设置 未选为false 修改class
					    rlist[index].child.forEach(function(item,index2){
					    	rlist[index].child[index2].checked = false;
					    })
					}else{
						$(this).parent().next().find("input").prop("checked",true);
						//$(this).parent().next().find("input").attr("checked",true);
						//备用设置 已选为true 修改class
						rlist[index].child.forEach(function(item,index2){
					    	rlist[index].child[index2].checked = true;
					    })
					}
				})
				
				//监听点击 子类权限
				$("body").on("change","input[name='Checkbox']",function(e){
					console.log(e);
					var idselect = $(this).find("input").is(":checked");
					console.log("idselect",idselect)
					var index = this.getAttribute("index");
					var index2 = this.getAttribute("index2");
					//未选
					if(!idselect){
						//$(this).find("input").attr("checked",true);
						$(this).find("input").prop("checked",true);
						var isActive = g("switch"+index).classList.contains("mui-active");
						if(!isActive){
							if(!$("#switch"+index).is(".mui-active")){
								$("#switch"+index).addClass("mui-active");
								//设置子类样式，
								$("#switch"+index).children("div").css({'transition-duration': '0.2s', 'transform': 'translate(43px, 0px)'})
							}
						}
						rlist[index].child[index2].checked = true;
					}else{
						//已选
						//$(this).find("input").attr("checked",false);
						$(this).find("input").prop("checked",false);
						rlist[index].child[index2].checked = false;
					}
				})
				getroledetail();
			}
			
			//获取单个角色权限
			function getroledetail(){
				if(rid>0){
					var data = {
						url:"/api/role/detail",
						data:{access_token:acctoken(),role_id:rid,}
					}
					ajax(data,function(res){
						console.log("单个角色权限",res);
						//setroledetail(res.data.privilege);
						getprivilege(res.data.pri_id_list);
					})
				}
			}
			
			//设置单个角色权限
			function setroledetail(list){
				
				for(var i = 0; i < list.length; i++){
					var that = g(list[i].id);
					var sthat;
					if(!that){
						sthat = g("switch"+list[i].id);
					}
					console.log("第"+i+"个",that);
				}
				
			}
			
			//获取权限列表
			function getprivilege(rstr){
				var data = {
					url:"/api/role/privilege",
					data:{access_token:acctoken()}
				}
				ajax(data,function(res){
					console.log("获取权限列表",res);
					rlist = res.data;
					setprivilege(res.data,rstr);
				})
			}
			//获取是否有此权限
			function get_is_str(val,list){
				var flag = false;
				list.forEach(function(item,index){
					if(val == item){
						flag = true;
						return false;
					}
				})
				return flag;
			}
			 
			//设置权限列表
			function setprivilege(list,rstr){
				var arrlist = [];
					var str = "";
					console.log("字符串",rstr);
					slist = rstr.split(',');
					console.log(slist)
					list.forEach(function(item,index){
						str +=	'<div class="main"><div class="mui-input-row">'+
			    	    '<label>'+item.pri_name+'</label>';
			    	    //if(rstr.match(item.id)){
			    	    if(get_is_str(item.id,slist) || rstr == '*'){	
			    	    	str += '<div class="mui-switch mui-switch-blue mui-active" index="'+index+'" data-id="'+item.id+'" id="switch'+index+'">';
			    	    }else{
			    	    	str += '<div class="mui-switch mui-switch-blue" index="'+index+'" data-id="'+item.id+'" id="switch'+index+'">';
			    	    }
			    	    str += '<div class="mui-switch-handle"></div></div></div>'+
			    		'<ul class="mui-table-view ">';
			    		if(item.child&&item.child.length > 0){
			    			
			    		
			    		item.child.forEach(function(items,index2){
			    	        str += '<li><div class="mui-input-row mui-checkbox"><label>'+
					        items.pri_name+'</label>';
					        if(get_is_str(items.id,slist) || rstr == '*'){
			    			   	str += '<input index="'+index+'" index2="'+index2+'" name="Checkbox" type="checkbox" value="'+items.id+'" checked="checked">';
			    			   }else{
			    			   	str += '<input index="'+index+'" index2="'+index2+'" name="Checkbox" type="checkbox" value="'+items.id+'">';
			    			   }
					        
					    	'</div></li>';
			    		})
			    		}
						str+='</ul></div>';	
						
					})
					
					g("contentid").innerHTML = str;
					mui('.mui-content .mui-switch')['switch']();
			}
			
			//设置监听（旧版）
			function addevent(list){
				//console.log(list);
				for(var i = 0; i < list.length; i++){
					//setswitch(list[i]);
					//setview(list[i]);
				}
			}
			
			//旧版监听父类
			function setswitch(list){
				document.getElementById("switch"+list.id).addEventListener("toggle",function(event){
					//console.log(event.detail.isActive);
					var v1 = document.getElementById("view"+list.id).getElementsByTagName('li');
					console.log(v1)
					console.log(v1.length)
				  	if(!event.detail.isActive){
				  		plist.remove(list.id);
					    for (var i = 0; i < v1.length; i++) {
					    		//console.log(v1[i].lastChild.id);
					    		//console.log($(v1[i]).id)
					    		plist.remove(v1[i].lastChild.id);
					    		//console.log(plist);
								v1[i].getElementsByTagName('a')[0].className = "";
						 }
					}else{
						if(plist.indexOf(list.id) == -1){
							var str = {"pri_id":parseInt(list.id)}
							plist.push(str)
						}
					}
				})
				
			}
			
			//旧版 监听子类
			function setview(list){
				document.getElementById("view"+list.id).addEventListener("tap",function(e){
					var that = e.srcElement;
					var falg = patt.test(that.className);
					//console.log(that);
					if(falg){
						that.className = "";
						plist.remove(that.id);
					}else{
						that.className = "selected";
						var isActive = g("switch"+list.id).classList.contains("mui-active");
						if(!isActive){
							mui("#switch"+list.id).switch().toggle();
						}
						if(indexof(plist,that.id) == -1){
							var str = {"pri_id":parseInt(that.id)}
							plist.push(str)
						}
						console.log("添加id",plist);
					}
				})
			}
			
			
			//数组下标查找
			function indexof(arr,val){
				for (var i = 0; i < arr.length; i++) {
					if (arr[i].pri_id == val) {
						return i;  
					}
				}  
				return -1;  
			}
			/*function remove(arr,val){
				var index = arr.indexOf(val);  
				if (index > -1) {  
					arr.splice(index, 1);  
				}   
			}*/
			/*Array.prototype.indexOf = function(val) {  
				console.log(this)
				console.log(val)
				for (var i = 0; i < this.length; i++) {
					console.log(this[i])
					if (this[i] == val) {
						return i;  
					}
				}  
				return -1;  
			};*/
			
			//原型 删除
			Array.prototype.remove = function(val) {  
				var index = indexof(this,val);  
				if (index > -1) {  
					this.splice(index, 1);  
				}  
			};

		</script>
	</body>

</html>